import React from 'react';
import {Link} from 'react-router';
import {setItem, getItem, setSessionItem, getSessionItem, formatDateBetween} from '../../utils';
import {FETCH_ACT_LIST} from '../../constants/actTypes';
import {FETCH_GLOBAL_CONFIG} from '../../constants/helperTypes';
import config from '../../config';
/**
 * 加载公共组件
 * */
import MainSection from '../../components/MainSection/MainSection';
import Header from '../../components/Header/Header';
import Location from '../../components/Location/Location';
import Avatar from '../../components/Avatar/Avatar';
import InfiniteScroll from '../../components/InfiniteScroll/InfiniteScroll';
import Price from '../../components/Price/Price';


/**
 * 加载样式或图片文件
 * */
import './sass/activityList.scss';


class ActivityList extends React.Component {
    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };

    constructor(props) {
        super(props);
        this.loadMore = this.loadMore.bind(this);
        this.loadCity = this.loadCity.bind(this);
        this.handleChangeLocation = this.handleChangeLocation.bind(this);
        this.state = {
            actList: [],
            isEnd: false,
            isNoData: false,
            isLoading: false,

            city: getItem('CUR_CITY') || '',
            page: 0,
            size: 10
            // totalPage: 1
        };
    }

    componentDidMount() {
        this.loadMore();
        this.loadCity();
    }

    loadCity() {
        // if (!getSessionItem('CITY_CONFIG')) {
            const {actions} = this.props;
            actions.fetchGlobalConfig().then(res => {
                if (res.type === FETCH_GLOBAL_CONFIG) {
                    if (res.data.code === 20000) {
                        // setSessionItem('CITY_CONFIG', true);
                    }
                }
            });
        // }
    }

    loadMore() {
        const {actions} = this.props;
        this.setState({
            isLoading: true,
            page: this.state.page + 1
        }, () => {
            actions.fetchActList(
                {
                    page: this.state.page,
                    size: this.state.size,
                    city: this.state.city
                }).then(response => {
                if (response.type === FETCH_ACT_LIST) {
                    if (response.actList.length === 0 && this.state.page === 1) {
                        // 没有数据
                        this.setState({isNoData: true});
                    } else if (response.actList.length < this.state.size) {
                        this.setState({
                            isEnd: true
                        });
                    }
                    this.setState({
                        actList: [
                            ...this.state.actList,
                            ...response.actList],
                        isLoading: false
                    });
                }
            });
        });
    }

    handleChangeLocation(value) {
        // 重置分页 并 设置城市
        this.setState({
            actList: [],
            page: 0,
            isEnd: false,
            isNoData: false,
            city: value
        }, () => {
            this.loadMore()
        });

    }

    jumpToDetail(id) {
        !!getItem('token') && setItem('NEXT_URL', "/activityList/" + id);
        this.context.router.push("/activityList/" + id);
    }

    render() {
        const {location, actions, user, act, helper} = this.props;
        return (
            <MainSection className="activity" title="活动列表">

                <Header actions={actions} location={location} user={user} title="找活动"/>
                <Location
                    city={helper.city}
                    checked={0}
                    onChange={this.handleChangeLocation}/>

                <InfiniteScroll loadFunc={this.loadMore}
                                isEnd={this.state.isEnd}
                                isNoData={this.state.isNoData}
                                isLoading={this.state.isLoading}>
                    <ul className="activity-list">
                        {
                            this.state.actList.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <div className="act-body" onClick={this.jumpToDetail.bind(this, item.id)}>
                                            <img src={item.image} alt=""/>
                                            <div className="text">
                                                <h5>{item.name}</h5>
                                                {
                                                    // <p className="address">{item.location}</p>
                                                }
                                                <p className="time">{formatDateBetween(item.startTime, item.endTime)}</p>
                                                <div
                                                    className={"status style" + item.status}>{config.ACTIVITY_STATUS[item.status]}</div>
                                            </div>
                                        </div>
                                        {
                                            item.room ? (
                                                <Link className="act-footer" to={"/sponsor?id=" + item.room.id}>
                                                    <Avatar src={item.room.avatar} isVip={true}/>
                                                    <div className="master-name color-3">{item.room.name}</div>
                                                    {
                                                        item.type === 101 ? (
                                                            <p className="price-box color-9">
                                                                <Price num={item.price}/>
                                                                <em>/儿童</em>
                                                            </p>
                                                        ) : (
                                                            <p className="price-box color-9">
                                                                <Price num={item.point} isScore={true}/>
                                                                <em>/儿童</em>
                                                            </p>
                                                        )
                                                    }
                                                </Link>
                                            ) : (
                                                <div className="act-footer">
                                                    <Avatar src={item.sponsor.avatar}/>
                                                    <div className="master-name color-3">{item.sponsor.name}</div>
                                                    {
                                                        Math.random() > 0.5 ? (
                                                            <p className="price-box color-9">
                                                                <Price num={item.price}/>
                                                                <em>/儿童</em>
                                                            </p>
                                                        ) : (
                                                            <p className="price-box color-9">
                                                                <Price num={item.price} isScore={true}/>
                                                                <em>/儿童</em>
                                                            </p>
                                                        )
                                                    }
                                                </div>
                                            )
                                        }

                                    </li>
                                )
                            })
                        }
                    </ul>
                </InfiniteScroll>
            </MainSection>
        );
    }
}

export default ActivityList;